<template>
  <div class="m-sider h-full">
    <el-aside width="200px" class="h-full">
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        @select="handleSelect"
        router
      >
        <el-sub-menu v-for="route in menuList" :key="index" :index="route.path">
          <template #title>{{ route.meta.title || '' }}</template>
          <el-menu-item v-for="childRoute in route.children" :index="route.path+'/'+childRoute.path">{{ childRoute.meta.title }}</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script setup>
import { routes } from '@/router/index'
import { ref } from 'vue'
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
function generateMenus(routes){
  return routes.filter(item=>{
    if(item.children){
      item.children = generateMenus(item.children)
    }
    return !item.hidden
  })
}
const menuList = generateMenus(routes)
console.log('menuList:',menuList)

</script>

<style scoped></style>
